<template>
  <el-table :data="dataList" border style="width: 100%" max-height="550">
    <el-table-column
      v-for="item in tableTem"
      :label="item.label"
      :prop="item.prop"
      :width="item.width"
    />
    <el-table-column prop="isPay" label="是否支付">
      <template #default="{ row }">
        <span>{{ row.isPay ? "已支付" : "未支付" }} </span>
      </template>
    </el-table-column>
    <el-table-column prop="shop_img" label="商品图片" width="100">
      <template #default="{ row }">
        <img :src="row.shop_img" alt="" style="width: 100%; height: 100%" />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="{ row }">
        <el-button type="primary" @click="refund(row)" v-if="row.isPay">退款</el-button>
        <el-button type="danger" @click="refund(row)" v-else>删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <Pagination :count="count" @page-change="pageChange"></Pagination>
</template>
<script setup lang="ts">
import { allOrder, orderRefund } from "@/request/api";
import Pagination from "@/components/Pagination.vue";
import { orderList } from "@/util/data";
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
const count = ref(0);
const page = reactive({
  pageSize: 10,
  page: 1,
});
const tableTem = ref(orderList);
const dataList = ref([]);
async function getOrderList() {
  const { data } = await allOrder(page);
  count.value = data.count;
  dataList.value = data.res;
}
getOrderList();
// 页码改变
const pageChange = (e: number) => {
  page.page = e;
  getOrderList();
};
// 退款
const refund = async (row: any) => {
  await orderRefund(row.order_id).then(() => {
    ElMessage.success("退款成功");
    getOrderList();
  });
};
</script>
